<template>
	<!-- 电梯故障管理/电梯故障记录/电梯故障记录详情-->
	<div class="operationBox heightMax operationBoxDetail">
		<div class="operationBoxLeft">
			<div class="listName">
				<i></i><span class="font14">使用单位：保利物业发展股份有限公司无锡分公司</span>
			</div>
			<div class="liftName">
				<h3>天悦华府 25#</h3>
			</div>
			<div class="speBtn" style="margin-bottom: 5px;">
				<el-tooltip content="电梯内视频监控" placement="bottom" effect="light">
					<el-button icon="el-icon-view"></el-button>
				</el-tooltip>
				<el-tooltip content="体检报告" placement="bottom" effect="light">
					<el-button icon="el-icon-document"></el-button>
				</el-tooltip>
				<el-tooltip content="分析诊断" placement="bottom" effect="light">
					<el-button icon="el-icon-zoom-in"></el-button>
				</el-tooltip>
				<el-tooltip content="设备状态" placement="bottom" effect="light">
					<el-button icon="el-icon-set-up"></el-button>
				</el-tooltip>
			</div>
			<div class="liftBox">
				<div class="bgLift">
					<div class="lift-num">
						<div class="Num">1</div>
					</div>
					<div class="door">
						<img src="../../../assets/liftImg/leftDoor.jpg" alt="">
						<img src="../../../assets/liftImg/rightDoor.jpg" alt="">
					</div>
				</div>
			</div>
			<div class="listName listNmaTwo">
				<i></i><span class="font14">今日异常信号： 暂无异常信号</span>
			</div>
		</div>
		<div class="operationBoxRight">
			<div class="listName">
				<i></i><span class="font14">今日故障</span>
			</div>
			<el-row>
				<el-col :span="14" class='col'>
					<span>报警类型：</span>
					<el-select v-model="policeStatus" multiple placeholder="请选择" clearable class='moreSelect'>
						<el-option :disabled="isDisable" v-for="item in policeStatusArr" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" icon="el-icon-search" class='fr'>搜索</el-button>
				</el-col>
			</el-row>
			<div class="tableBox">
				<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
				 @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader'>
					<el-table-column type="index" class="over" fixed>
					</el-table-column>
					<el-table-column type="selection" min-width="50" fixed>
					</el-table-column>
					<el-table-column label="备案状态" min-width="140">
						<template slot-scope="scope" class="degb">
							<div slot="reference" class="name-wrapper">
								<el-badge :value="scope.row.registry_status_icon" class="item" :type="scope.row.registry_status_type">
									<el-tag size="medium">{{ scope.row.registry_status_name}}</el-tag>
								</el-badge>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="合同状态" min-width="100">
						<template slot-scope="scope" class="degb">
							<div :style="{backgroundColor:scope.row.contract_status}" class="ball">
							</div>
						</template>
					</el-table-column>
					<el-table-column property="contract_name" label="合同名称" min-width="160">
					</el-table-column>
					<el-table-column property="contract_no" label="合同编号" min-width="140">
					</el-table-column>
					<el-table-column property="contract_type" label="合同类型" min-width="120">
					</el-table-column>
					<el-table-column property="maintain_company_name" label="维保单位" min-width="230">
					</el-table-column>
					<el-table-column property="property_company_name" label="使用单位" min-width="230">
					</el-table-column>
					<el-table-column property="maintain_cycle" label="维保周期" min-width="150">
					</el-table-column>
					<el-table-column property="start_time" label="开始时间" min-width="150">
					</el-table-column>
					<el-table-column property="end_time" label="结束时间" min-width="150">
					</el-table-column>
					<el-table-column property="update_by_people" label="最后更新人" min-width="150">
					</el-table-column>
					<el-table-column property="update_time" label="最后更新时间" min-width="160">
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="pag">
					<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
					 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
	} from "@/common.js";
	export default {
		mounted() {
			this.getTableList()
		},
		data() {
			return {
				page:1,
				page_size:10,
				total:1,
				tableData:[],
				policeStatus: [],
				policeStatusArr: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
			}
		},
		computed: {
			isDisable() {
				if (this.policeStatus.length >= 3) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			getTableList() {
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					key_words: this.query,
					registry_status: this.registry_status,
					expire: this.expire,
				}
				axiosGet('/maintain/contract/', params, (res) => {
					console.log(res)
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
						this.tableData.map((item) => {
							if (item.registry_status == 10) {
								item.registry_status_type = "warning"
								item.registry_status_name = "尚未备案"
								item.registry_status_icon = "?"
							} else if (item.registry_status == 20) {
								item.registry_status_type = "success"
								item.registry_status_name = "备案成功"
								item.registry_status_icon = "✔"
							} else {
								item.registry_status_type = "danger"
								item.registry_status_name = "备案失败"
								item.registry_status_icon = "X"
							}
							if (item.contract_type == 10) {
								item.contract_type = '质保'
							} else if (item.contract_type == 20) {
								item.contract_type = '保养'
							} else if (item.contract_type == 30) {
								item.contract_type = '维修'
							}
							if (item.maintain_cycle == 10) {
								item.maintain_cycle = '15天'
							} else if (item.maintain_cycle == 20) {
								item.maintain_cycle = '一个月'
							} else if (item.maintain_cycle == 30) {
								item.maintain_cycle = '一个季度'
							} else if (item.maintain_cycle == 40) {
								item.maintain_cycle = '一年'
							}
							return item
						})
					} else {
						this.$message({
							type: 'error',
							message: res.detail.result
						})
					}
					this.loading = false
				})
			},
			find() {

			},
			//表格
			rowClick() {

			},
			selectChange() {

			},
			//分页器
			handleSizeChange() {

			},
			handleCurrentChange() {

			}
		},
	}
</script>

<style scoped lang="less">
	.operationBox {
		display: flex;
		flex-direction: row;
		background: #E9EEF3;

		.operationBoxLeft {
			width: 40%;
			height: 100%;
			background: #fff;
			margin-right: 0.5%;

			.liftName {
				margin-bottom: 15px;
			}

			.liftBox {
				width: 100%;
				display: flex;
				justify-content: center;

				.bgLift {
					width: 53%;
					height: 330px;
					background: url(/img/lift.10c4d9bc.png) no-repeat 0 0;
					background-size: cover;
					position: relative;

					.lift-num {
						display: flex;
						width: 100%;
						justify-content: center;
						align-items: center;
						position: absolute;
						top: 17px;

						.Num {
							padding: 1px 25px;
							background: #000;
							color: #eee;
							font-family: Digital;
						}
					}

					.door {
						position: absolute;
						top: 48px;

						img {
							width: 42%;
							animation: openDoor 5s linear 1;
							height: 270px;
						}

						img:first-child {
							transform-origin: left
						}

						img:last-child {
							transform-origin: right;
						}
					}
				}
			}
		}

		.operationBoxRight {
			width: 59.5%;
			height: 100%;
			background: #fff;
			padding-left: 10px;
			box-sizing: border-box;

			.col {
				display: flex;

				span {
					width: 130px;
					display: flex;
					justify-content: center;
				}
			}
			.tableBox{
				height: 85%;
				overflow: auto;
			}
		}
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;
		margin-bottom: 15px;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
		}
	}

	@keyframes openDoor {
		0% {
			transform: rotateY(20deg)
		}

		10% {
			transform: rotateY(40deg)
		}

		20% {
			transform: rotateY(60deg)
		}

		30% {
			transform: rotateY(80deg)
		}

		40% {
			transform: rotateY(90deg)
		}

		50% {
			transform: rotateY(90deg)
		}

		60% {
			transform: rotateY(80deg)
		}

		70% {
			transform: rotateY(60deg)
		}

		80% {
			transform: rotateY(40deg)
		}

		90% {
			transform: rotateY(20deg)
		}

		100% {
			transform: rotateY(0deg)
		}
	}

	.listNmaTwo {
		margin-bottom: 0;
		margin-top: 15px;
	}
</style>
